<template>
	<view class="container">
		<view class="ws-view">
			<view class="ws-group">
				<text class="ws-group-title">WebSocket：</text>
				<view class="ws-group-card">
					<text class="ws-group-card-text">Port:</text>
					<input class="ws-group-card-input"  @input="wsportinput" v-model="wsport" placeholder="8000">
				</view>
				<view class="ws-group-card">
					<text class="ws-group-card-text">IP:</text>
					<input class="ws-group-card-input"  @input="wsipinput" v-model="wsip" placeholder="127.0.0.1">
				</view>				
			</view>
			<view class="ws-btns">
				<button class="ws-btns-item" @click="connectwss">连接服务器</button>
				<button class="ws-btns-item" @click="disconnectwss">断开服务器</button>
				<button class="ws-btns-item" @click="getdata">更新</button>
				<view class="ws-connect-state" :class="connstatus">
					<text class="ws-connect-state-text">连接状态</text>
				</view>
			</view>
		</view>
		<view class="param-show">
				<view v-for="(device,index) in devices" :key="index" class="device-card">
					<view class="device-title">{{device.type}}</view>
					<view v-for="(value,key) in device.data" :key="key" class="device-item">
						<text class="device-label">{{ key }}</text>
						<text class="device-value">{{ value }}</text>
					</view>
				</view>
			<view class="param-show-urrobot">
				
			</view>
			<view class="param-show-camera">
				
			</view>
		</view>
	</view>
</template>

<script>
	
	export default {
		data() {
			return {
				socketTask:null,
				connstatus:'ws-connect-state',
				devices:[],
				wsip:'192.168.3.4',
				wsport:'8000',
			}
		},
		computed:{
		
		},
		methods: {
			wsipinput(e){
				this.wsip = e.detail.value;
				//console.log(this.wsip);
			},
			wsportinput(e){
				this.wsport = e.detail.value;
			},
			//连接websocket服务器
			connectwss(){
				const ip = this.wsip;
				const port = this.wsport;
				const ws = `ws://${ip}:${port}`
				//console.log(ws1);
				this.socketTask = uni.connectSocket({
					url:ws,
					success() {
						
					},
					fail(){
						uni.showToast({
							title:'连接失败！',
							duration:1000
						})
					}
				});
				this.socketTask.onOpen(()=>{
					console.log('websocket open');
					this.connstatus = 'ws-connect-state-ok';
					uni.showToast({
						title:'websocket 已连接！',
						duration:1000
					});
					let senddata = JSON.stringify({
						type:'msg',
						data:'GETDATA'
					});
					this.socketTask.send({data:senddata})
				});
				this.socketTask.onClose(()=>{
					console.log('websocket close');
					this.connstatus = 'ws-connect-state';
					uni.showToast({
						title:'websocket 已关闭！',
						duration:1000
					});
					this.devices = [];
				});
				this.socketTask.onMessage((res)=>{
					//console.log(`接收信息：${res.data}`);
					const data_json = JSON.parse(res.data);
					console.log(data_json);
					const type = data_json.type;
					const robot = data_json.robot;
					const camera = data_json.camera;
					const agv = data_json.agv;
					const plc= data_json.plc;
					const dd = {robot:robot,camera:camera,agv:agv,plc:plc};
					this.devices = Object.entries(dd).map(([key,value])=>({
						type:key,
						data:value
					}))
					
				});
				this.socketTask.onError((err)=>{
					console.error(err);
					uni.showToast({
						title:`连接错误：${err}`,
						duration:1000
					})
				})
			},
			//断开websocket服务器
			disconnectwss(){
				this.socketTask.close()
			},
			//获取数据
			getdata(){
				let senddata = JSON.stringify({
					type:'msg',
					data:'GETDATA'
				});
				this.socketTask.send({data:senddata});
			}
		}
	}
</script>

<style scoped>
	.container{
		background-color: #55aaff;
	}
	.ws-view{
		padding: 10px;
	}
	.ws-group{
		display: flex;
		flex-direction: column;
		gap: 5px;
		margin-bottom: 20px;
	}
	.ws-group-title{
		font-size: 30rpx;
		font-weight: bold;
		margin-bottom: 15rpx;
	}
	.ws-group-card{
		background-color: #ffffff;
		display: flex;
		flex-direction: row;
		gap: 2px;
		margin-top: 10px;
	}
	.ws-group-card-text{
		width: 60px;
		margin-left: 10px;
	}
	.ws-group-card-input{
		width: 100px;
	}
	.ws-btns{
		display: flex;
		flex-direction: row;
		gap: 10rpx;
		margin-bottom: 20px;
	}
	.ws-btns-item{
		width: 100px;
		height: 40px;
	}
	.ws-connect-state{
		width: 40px;
		height: 40px;
		border-radius: 5px;
		background-color: #bcbcbc;
	}
	.ws-connect-state-ok{
		background-color: #55ff00;
	}
	.device-card {
	  margin: 20rpx;
	  padding: 20rpx;
	  background-color: #f9f9f9;
	  border-radius: 10rpx;
	}
	.device-title {
	  font-size: 36rpx;
	  font-weight: bold;
	  margin-bottom: 15rpx;
	}
	.device-item {
	  display: flex;
	  justify-content: space-between;
	  padding: 10rpx 0;
	}
	.device-label {
	  color: #666;
	}
	.device-value {
	  color: #333;
	}
</style>
